<template>
    <view>
        <view class="menu br-24 mt-24">
            <template v-for="(item, index) in menuList">
                <hj-login
                    @click="click(item)"
                    @init="click(item, true)"
                    :key="item.id"
                    v-if="item.isNeedLogin"
                >
                    <view
                        class="menu-item align-center pl-30 pr-24"
                        :class="[index === 0 ? 'noBorder' : '']"
                    >
                        <view class="align-center flex-auto">
                            <hj-image
                                :src="item.src"
                                :height="item.height"
                                :width="item.width"
                                mode="aspectFit"
                            />
                            <view class="ft-28 t-3 flex-auto pl-16 text-left">{{
                                item.name || ''
                            }}</view>
                        </view>
                        <hj-image
                            src="right-03.png"
                            height="26rpx"
                            width="26rpx"
                            mode="aspectFit"
                        />
                    </view>
                </hj-login>
                <view
                    v-else
                    @click="click(item)"
                    class="menu-item align-center pl-30 pr-24"
                    :class="[index === 0 ? 'noBorder' : '']"
                >
                    <view class="align-center flex-auto">
                        <hj-image
                            :src="item.src"
                            :height="item.height"
                            :width="item.width"
                            mode="aspectFit"
                        />
                        <view class="ft-28 t-3 flex-auto pl-16 text-left">{{
                            item.name || ''
                        }}</view>
                    </view>
                    <hj-image src="right-03.png" height="26rpx" width="26rpx" mode="aspectFit" />
                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 用户菜单
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'MyMenu'
})

// 菜单列表
const menuList = ref([
    {
        id: 1,
        name: '发票管理',
        src: 'menu-01.png',
        height: '48rpx',
        width: '48rpx',
        path: '/pages/user/invoice-list/index',
        isNeedLogin: true
    }
])

const emit = defineEmits(['init'])

// 发票管理
const click = (data, isLogin = false) => {
    // 如果是登录初始化的  需要通知父组件更新某些接口
    if (isLogin) {
        emit('init')
    }
    if (!data.path) return
    uni.navigateTo({
        url: data.path
    })
}
</script>

<style scoped lang="scss">
.menu {
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-item {
        min-height: 104rpx;
        width: 100%;
        border-top: 1px solid $uni-bg-color-grey;
        position: relative;
    }
    .noBorder {
        border: none;
    }
}
</style>
